<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_867746_w0h1umpzjai.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>   
    <title>小米商城</title>
</head>
<body>
    <div class="top">
        <div class="container">
            <div class="top-nev">
                <a href="">小米网</a><span>|</span>
                <a href="">MIUI</a><span>|</span>
                <a href="">米聊</a><span>|</span>
                <a href="">游戏</a><span>|</span>
                <a href="">多看阅读</a><span>|</span>
                <a href="">云服务</a><span>|</span>
                <a href="">小米网移动版</a><span>|</span>
                <a href="">Select region</a><span>|</span>
                <a href="">米粉节答疑</a>          
            </div>
            <div class="reg-log">
                <a href="">注册</a><span>|</span>
                <a href="">登录</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="header">
            <div class="logo">
                <a href=""><img src="images/logo.png" alt="logo"></a> 
            </div>
            <div class="search">
                <div class="tip">
                    <img src="images/clock.png" alt="">
                    <span>4月14日开放购买</span>
                </div>
                <div class="search-cart">
                    <form action="" class="search-form">
                        <input type="search" name="keyword" class="search-text" placeholder="搜索您需要的商品">
                        <input type="submit" value="&#xe63b;" class="search-btn iconfont">
                        <div class='search-hot-words'>
                              <a href="">小米手环</a>
                              <a href="">耳机音箱</a>
                              <a href="">保护壳</a>
                        </div>
                    </form>
                    <button class="cart">
                        <img src="images/shopcar.png" alt="">
                        购物车
                    </button>
                </div>
            </div>
        </div>
        <div class="menu">
            <div class="menu-nev">
                <ul class="row">
                    <li class="all-category"><a href="">全部商品分类</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">小米手机</a></li>
                    <li><a href="">红米</a></li>
                    <li><a href="">小米平板</a></li>
                    <li><a href="">小米电视</a></li>
                    <li><a href="">盒子</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">合约机</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="category">
                <div class="menu-cate">
                   <a href="" class="title">购买手机</a> 
                    <a href="" class="text">小米Noto 小米4 红米 红米Noto</a> 
                </div>
                <div class="menu-cate">
                    <a href="" class="title">购买电脑与平板</a> 
                    <a href="" class="text">小米电视 小米盒子 小米平板</a>
                </div>
                <div class="menu-cate">
                    <a href="" class="title">路由器与智能硬件</a> 
                    <a href="" class="text">路由器 体重秤 净化器与滤芯</a>
                </div>
                <div class="menu-cate">
                    <a href="" class="title">插线板、移动电源与电池</a> 
                    <a href="" class="text">小米移动电源 电池 充电器</a>
                </div>
                <div class="menu-cate">
                    <a href="" class="title">耳机音箱与存储卡</a> 
                    <a href="" class="text">小米头戴式耳机 小米活塞耳机</a>
                </div>
                <div class="menu-cate">
                    <a href="" class="title">保护套与贴膜</a> 
                    <a href="" class="text">保护套/保护壳 贴膜 防尘塞</a>
                </div>
                <div class="menu-cate">
                    <a href="" class="title">后盖与个性化配件</a> 
                    <a href="" class="text">米键 后盖 贴纸 手机支架</a>
                </div>
                <div class="menu-cate">
                    <a href="" class="title">小米生活方式</a> 
                    <a href="" class="text">服装 米兔 背包 生活周边</a>
                </div>
            </div>
            <div class="carousel">
                <div class="carousel-pic">
                    <img src="images/banner1.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner5.png" alt="">
                </div>
                <div class="carousel-icons">
                    <span class="active">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
            <div class="menu-bottom">
                <a href=""><img src="images/01.png"  alt=""></a> 
                <a href=""><img src="images/02.png" alt=""></a> 
                <a href=""><img src="images/03.png" alt=""></a> 
            </div>
        </div> 
        <div class="single-info">
            <span>小米明星单品</span>
            <span><a href="">根据机型选配件</a></span>
            <div class="single-icons">
                <div class="single-icon">
                    <a href=""><img src="images/left.png" alt=""></a>
                </div>
                <div class="single-icon">
                    <a href=""><img src="images/right.png" alt=""></a>
                </div>
            </div>
        </div>   
        <div class="single-content">
            <ul>
                <li><a href=""> <img src="./images/chazuo.jpg" alt=""></a>
                  <h3><a href="">小米智能插座</a> </h3>
                  <p>让普通家电变得智能</p>
                </li>
                <li><a href=""> <img src="./images/jinghuaqi.jpg" alt=""></a>
                    <h3><a href="">小米空气净化器</a> </h3>
                    <p>高性能空气净化器立即预约</p></li>
                <li><a href=""> <img src="./images/erji1.jpg" alt=""></a>
                    <h3><a href="">小米活塞耳机简装版</a> </h3>
                    <p>好音质源自于活塞式音腔，延续经典设计</p></li>
                <li><a href=""> <img src="./images/luyouqi.jpg" alt=""></a>
                    <h3><a href="">小米路由器</a> </h3>
                    <p>顶级双屏幕AC智能路由器，内置1TB大硬盘</p></li>
            </ul>
        </div>
    </div>    
 <div class="new">
    <div class="container">
        <div class="new-title">
            <span>新品上架</span>
            <span> <a href="">更多<i class="iconfont">&#xe610;</i></a></span>
        </div>
        <div class="new-content">
            <div class="new-content-left">
                <ul>
                    <li class="new-top">
                        <div class="new-one-left">
                            <a href=""><img src="./images/lanyayinxiang.jpg" alt=""></a>
                        </div>
                        <div  class="new-one-right">
                            <p>小米手环<br>79元</p>
                            <a href=""><img src="./images/shouhuan.jpg" alt=""></a>
                        </div>
                    </li>
                    <li class="new-middle">
                        <div class="new-two-left">
                            <div>
                                <p>5周年米兔钥匙扣</p>
                                <p>9.9元</p>         
                                <a href=""><img src="./images/yaooshi.jpg" alt="" ></a>
                                
                                </div>
                            <div>
                                <p>QCY派Q8蓝牙耳机</p>
                                <p>59.9元</p>         
                                <a href=""><img src="./images/lanyaerji.jpg"></a>
                            </div>
                        </div>
                        <div class="new-two-center public">
                            <p>小T恤路标LOGO</p>
                            <p>39元</p>
                            <a href=""><img src="./images/txu.jpg" alt=""></a>
                        </div>
                        <div  class="new-two-right public">
                                <p>小米4实木后盖</p>
                                <p>69元</p>
                                <a href=""><img src="./images/shimuhougai.jpg" alt=""></a>
                        </div>   
                    </li>
                    <li class="new-bottom">
                        <div class="new-three-left public">
                                <p>小米Note超薄保护壳</p>
                                <p>49元</p>
                                <a href=""><img src="./images/baohuke.png" alt=""></a>
                        </div>
                        <div class="new-three-center public">
                                <p>小米自拍杆</p>
                                <p>49元</p>
                                <a href=""><img src="./images/zipaigan.jpg" alt=""></a>
                        </div>
                        <div  class="new-three-right public">
                                <p>先锋CL31系列耳式耳机</p>
                                <p>99元</p>
                                <a href=""><img src="./images/erji2.jpg" alt=""></a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="new-content-right">
                <ul class="cheap">
                    <li>
                        <div>
                             <p class="sale">特价商品</p>
                                <h3>SanDisk32GB存储卡</h3>
                                <p><span>79</span>元<del>109元</del></p> 
                                <p>还有更多特价商品</p>
                        </div>
                        <a href=""><img src="./images/cunchuka.png" alt=""></a>
                    </li>
                    <li>
                            <div>
                                    <h3>特惠配件套餐</h3>
                                    <p>手机必备配件组合购买</p> 
                                    <p>实惠更优惠</p>
                            </div>
                            <a href=""><img src="./images/peijian.jpg" alt=""></a>
                    </li>
                    <li>
                            <div>
                                    <h3>我爱酷玩</h3>
                                    <p>邂逅炫酷的电子产品</p> 
                                    <p>结交趣味相投的朋友</p>
                            </div>
                            <a href=""><img src="./images/kuwan.jpg" alt=""></a>
                    </li>
                </ul>
                <ul class="tips">
                    <li >
                        <a href="" class="current">企业用户采购通道 <i class="iconfont"i>&#xe610;</a>
                    </li>
                    
                    <li>
                        <a href="">小米手机防伪查询 <i class="iconfont"i>&#xe610;</a>
                    </li>
                  
                    <li>
                        <a href="">小米手机官翻版 <i class="iconfont"i>&#xe610;</a>
                    </li>
                    <li>
                        <a href="">小米路由器官翻版 <i class="iconfont"i>&#xe610;</a>
                    </li>
                
                    <li>
                        <a href="">米粉红包 <i class="iconfont"i>&#xe610;</a>
                    </li>     
                </ul>
                <ul class="huafei">
                     <p>话费充值</p>
                    <input type="text" placeholder="请输入手机号">
                    <input type="text" placeholder="100元">
                    <select name="" id="" value=''>
                            <option value="" selected></option>
                        <option value="">200元</option>
                        <option value="">自定义金额</option>
                    </select>
                    <p>实付价格98.4元起</p>
                    <button>立即充值</button>
                </ul>
            </div>
          </div>
    </div>
   </div>
   
   <div class="foot"> 
      <div class="container">
        <div class="icons">
        <ul>
            <li>
                <img src="images/10.png" alt="">
                <p>1小时快修服务</p>
            </li>
            <li>
                <img src="images/11.png" alt="">
                    <p>7天无理由退货</p>
            </li>
            <li>
                <img src="images/12.png" alt="">
                    <p>15天免费换货</p>
            </li>
            <li>
                <img src="images/13.png" alt="">
                    <p>满150元包邮</p>
            </li>
            <li>
                <img src="images/14.png" alt="">
                    <p>520余家售后网点</p>
            </li>
        </ul>
        </div>
        <div class="intro">
             <ul>
                 <li>
                     <h3>帮助中心</h3>
                     <a href="">购物指南</a>
                     <a href="">支付方式</a>
                     <a href="">配送方式</a>
                 </li>
                 <li>
                        <h3>服务支持</h3>
                        <a href="">售后政策</a>
                        <a href="">自助服务</a>
                        <a href="">相关下载</a>
                 </li>
                 <li>
                        <h3>小米之家</h3>
                        <a href="">小米之家</a>
                        <a href="">服务网店</a>
                        <a href="">预约亲临到店服务</a>
                 </li>
                 <li>
                        <h3>关于小米</h3>
                        <a href="">了解小米</a>
                        <a href="">加入小米</a>
                        <a href="">联系我们</a>
                 </li>
                 <li>
                        <h3>关注我们</h3>
                        <a href="">新浪微博</a>
                        <a href="">小米部落</a>
                        <a href="">官网微信</a>
                 </li>
                 <li>
                        <h3>400-100-5678</h3>
                        <p>周一至周日8:00-18:00</p>
                        <p>（仅收市话费）</p>
                        <button>24小时在线客服</button>
   
                 </li>
             </ul>         
        </div> 
        <p class="btm-text"> 小米旗下商城：小米网 | MIUI | 米聊 | 多看书城 | 小米路由器 | 繁体香港 | 繁体台湾 | English | 小米后院 | 小米天猫店 | 小米淘宝直营店 | 小米网盟</p>
       <p class="btm-text">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 </p>
      <div class="btn-img">
          <img src="./images/16.png" alt="">
          <input  class="zhongwen" type="text" placeholder="简体中文">
      <select name="" id="">
          <option value=""></option>
          <option value="">英语</option>
      </select>
        </div>
    </div>
     
   </div>
    <script src="js/index.js"></script>
    
    
</body>
</html>